<%#
 Licensed to the public under the Apache License 2.0.
-%>

<%+header%>

<%
	local fs = require "nixio.fs"
-%>
<div class="cbi-map" id="cbi-ota">
	<style>
	#cbi-ota .state-ctl .state {
		display: none !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
	}

	#cbi-ota .state-ctl.state-ctl-unchecked .state.state-unchecked,
	#cbi-ota .state-ctl.state-ctl-checked .state.state-checked,
	#cbi-ota .state-ctl.state-ctl-downloading .state.state-downloading,
	#cbi-ota .state-ctl.state-ctl-downloaded .state.state-downloaded
	{
		display: inherit !important;
	}

	</style>

	<h2 name="content"><%:OTA%></h2>
	<div class="cbi-section state-ctl state-ctl-unchecked">
		<div class="cbi-section-descr"><%:Check and upgrade firmware from the Internet%></div>
		<% if image_invalid then %>
			<div class="cbi-section-error"><%:The image file does not contain a supported format. Maybe try again later.%></div>
		<% end %>
		<div class="cbi-section-node">
			<div class="state state-unchecked">
				<form>
					<div class="cbi-value">
						<label class="cbi-value-title" id="check_result"></label>
						<div class="cbi-value-field">
							<button type="button" class="cbi-button cbi-button-reload" name="check"><%:Check update%></button>
							<div class="cbi-value-description">Step 1/3: <%:Check update%></div>
						</div>
					</div>
				</form>
			</div>
			<div class="state state-checked">
				<form>
					<div class="cbi-value">
						<label class="cbi-value-title" id="download_result"><%:Found new firmware%></label>
						<div class="cbi-value-field">
							<button type="button" class="cbi-button cbi-button-apply" name="download"><%:Download firmware%></button>
							<div class="cbi-value-description">Step 2/3: <%:Download firmware%></div>
						</div>
					</div>
				</form>
			</div>
			<div class="state state-downloading">
				<form>
					<div class="cbi-value">
						<label class="cbi-value-title" id="download_progress">0%</label>
						<div class="cbi-value-field">
							<button type="button" class="cbi-button cbi-button-reset" name="cancel"><%:Cancel download%></button>
							<div class="cbi-value-description">Step 2/3: <%:Download firmware%></div>
						</div>
					</div>
				</form>
			</div>
			<div class="state state-downloaded">
				<% if fs.access("/usr/lib/lua/luci/controller/admin/system.lua") then %>
				<form method="post" action="<%=url('admin/system/flashops/sysupgrade')%>" enctype="multipart/form-data">
					<input type="hidden" name="token" value="<%=token%>" />
					<input type="hidden" name="step" value="1" />
					<div class="cbi-value">
						<label class="cbi-value-title"><%:Firmware downloaded%></label>
						<div class="cbi-value-field">
							<input type="submit" class="cbi-button cbi-input-apply" value="<%:Flash image...%>" />
							<div class="cbi-value-description">Step 3/3: <%:Flash image...%></div>
						</div>
					</div>
				</form>
				<% else %>
				<form method="post" action="<%=url('admin/system/ota')%>">
					<input type="hidden" name="apply" value="1" />
					<input type="hidden" name="token" value="<%=token%>" />
					<div class="cbi-value">
						<label class="cbi-value-title" for="keep"><%:Keep settings and retain the current configuration%></label>
						<div class="cbi-value-field">
							<input type="checkbox" name="keep" value="1" id="keep" checked="checked" />
						</div>
					</div>
					<div class="cbi-value cbi-value-last">
						<label class="cbi-value-title"><%:Firmware downloaded%></label>
						<div class="cbi-value-field">
							<button type="submit" class="cbi-button cbi-input-apply"><%:Flash image%></button>
							<div class="cbi-value-description">Step 3/3: <%:Flash image%></div>
						</div>
					</div>
				</form>
				<% end %>
			</div>
		</div>
		<div class="state state-checked state-downloading state-downloaded">
			<div class="cbi-section-descr">
				<h2><%:The latest firmware%>:</h2>
				<div id="upgrade_log"></div>
			</div>
		</div>
		<div class="state state-unchecked">
			<div class="cbi-section-descr">
				<div id="history_log"></div>
			</div>
		</div>
	</div>

	<script>
		(function(){
			var csrfToken = "<%=token%>";
			var check = document.querySelector('button[name="check"]');
			var download = document.querySelector('button[name="download"]');
			var cancel = document.querySelector('button[name="cancel"]');
			var state_ctl = document.querySelector('.state-ctl');
			var check_result = document.querySelector('#check_result');
			var download_result = document.querySelector('#download_result');
			var download_progress = document.querySelector('#download_progress');
			var upgrade_log = document.querySelector('#upgrade_log');
			var history_log = document.querySelector('#history_log');

			var xhr_post = function(url, data, cb) {
				data = data || {};
				data.token = '<%=token%>';
				new XHR().post(url, data, function(x, d){
					cb && cb(x, x.status==200?JSON.parse(x.responseText):{code:500,msg:x.responseText});
				});
			};
			var state_switch = function(from, to) {
				state_ctl.classList.remove("state-ctl-" + from);
				state_ctl.classList.add("state-ctl-" + to);
			};
			check.onclick = function(){
				check.disabled = 'disabled';
				check_result.innerText = "<%:Checking...%>";
				xhr_post("<%=url('admin/system/ota/check')%>", {}, function(x, d){
					check.disabled = undefined;
					switch(d.code){
					case 0:
					case 2:
						check_result.innerText = "";
						upgrade_log.innerHTML = d.msg;
						if (d.code == 0) {
							state_switch("unchecked", "checked");
						} else {
							alert("<%:Found downloading firmware, will show progress%>");
							download_progress.innerText = "<%:Downloading%>: ...";
							cancel.disabled = 'disabled';
							state_switch("unchecked", "downloading");
							refresh_download_progress_timer = setTimeout(refresh_download_progress, 500);	
						}
						break;
					case 1:
						check_result.innerText = "<%:Already the latest firmware%>";
						history_log.innerHTML = '<h2><%:History Log%>:</h2>' + d.msg;
						break;
					default:
						check_result.innerText = "<%:Check failed%>";
						alert("<%:Check failed%>:\n"+d.msg);
					}
				});
			};
			var refresh_download_progress_paused = false;
			var refresh_download_progress_timer = null;
			var refresh_download_progress = function() {
				if (refresh_download_progress_paused) {
					refresh_download_progress_timer = setTimeout(refresh_download_progress, 500);
					return;
				}
				XHR.get("<%=url('admin/system/ota/progress')%>", {}, function(x, d){
					refresh_download_progress_timer = null;
					switch(d.code){
					case 0:
						download_progress.innerText = "";
						state_switch("downloading", "downloaded");
						break;
					case 1:
						if (d.msg.startsWith('#') || d.msg.startsWith(' ') || d.msg.startsWith('-')) {
							if (!refresh_download_progress_paused)
								cancel.disabled = undefined;
							if (d.msg.endsWith('%'))
								download_progress.innerText = "<%:Downloading%>: "+d.msg.replaceAll(/[# ]/g, '');
							else
								download_progress.innerText = "<%:Downloading%>";
						} else {
							if (!refresh_download_progress_paused)
								cancel.disabled = 'disabled';
							download_progress.innerText = d.msg;
						}
						refresh_download_progress_timer = setTimeout(refresh_download_progress, 500);
						break;
					case 2:
						download_result.innerText = "<%:Download canceled%>";
						state_switch("downloading", "checked");
						break;
					case 254:
						state_switch("downloading", "unchecked");
						break;
					default:
						download_result.innerText = "<%:Download failed%>";
						state_switch("downloading", "checked");
						alert("<%:Download failed%>:"+d.msg);
					}
				});
			};
			download.onclick = function(){
				download.disabled = 'disabled';
				xhr_post("<%=url('admin/system/ota/download')%>", {}, function(x, d){
					download.disabled = undefined;
					switch(d.code){
					case 0:
						download_progress.innerText = "<%:Downloading%>: ...";
						cancel.disabled = 'disabled';
						state_switch("checked", "downloading");
						refresh_download_progress_timer = setTimeout(refresh_download_progress, 500);
						break;
					default:
						alert("<%:Download failed%>:"+d.msg);
					}
				});
			};
			cancel.onclick = function() {
				cancel.disabled = 'disabled';
				refresh_download_progress_paused = true;

				xhr_post("<%=url('admin/system/ota/cancel')%>", {}, function(x, d){
					refresh_download_progress_paused = false;
				});
			};
		})();
	</script>
</div>
<%+footer%>
